<template>
	<uni-popup ref="uniPopup" type="bottom">
		<view class="flex f-column f-align auth-box">
			<button type="default" open-type="contact" class="kefu-btn">在线联系</button>
			<view class="font30 blue" @click="callPhone(item.servicePhone)" v-for="(item, index) in dataList" :key="index" style="line-height: 80rpx;">{{item.servicePhone}}</view>
			<view class="font30 cancel-btn f-center mt20" @click="close">取消</view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		data() {
			return {
				dataList: []
			};
		},
		methods: {
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			getList() {
				this.$http.ajax({
					url: '/ServicePhone/list',
					params: {}
				}).then((res) => {
					if (res.code == 200) {
						this.dataList = res.data
					}
				})
			},
			open() {
				this.$refs.uniPopup.open()
				this.getList()
			},
			close() {
				this.$refs.uniPopup.close()
			}
		}
	}
</script>

<style scoped lang="scss">
	.auth-box {
		width: 750rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #F5F5F5;
		padding: 30rpx 0 20rpx;
		
		.cancel-btn {
			width: 100%;
			line-height: 80rpx;
			border-top: 15rpx solid #DDDDDD;
		}

		.kefu-btn {
			margin: 0;
			padding: 0;
			font-size: 30rpx;
			line-height: 80rpx;
			color: #4082FF;
		}
		
		.kefu-btn::after {
			border: none;
		}
	}
</style>
